import { initState } from "./state.js";
import { compileToFunction } from "./compiler/index.js";
import { callHook, mountCompenent } from "./lifecycle.js";
import { mergeOptions } from "./utils.js";
export function initMixin(Vue) {
  // 标识在vue的基础上做一次混合操作
  Vue.prototype._init = function (options) {
    // 用户使用有时通过  vm.$options  拿到用户的所有选项
    const vm = this;
    // vm.$options = options; // 后面会对options进行扩展操作
    vm.$options = mergeOptions(this.constructor.options, options);

    console.log(vm.$options);
    callHook(vm, "beforeCreate");
    // 1. 对数据进行初始化， watch、computed、props、data...
    initState(vm); // vm.$options.data  数据劫持
    callHook(vm, "created");
    // debugger;

    if (vm.$options.el) {
      // 将数据挂载到这个模板上
      // 在这个过程中需要分析是否是dom元素

      vm.$mount(vm.$options.el);
      // callHook(vm, "mounted");
    }
  };

  Vue.prototype.$mount = function (el) {
    const vm = this;
    const options = vm.$options;
    el = document.querySelector(el);
    vm.$el = el;

    // console.log(el);
    // 把模板转化为对应的渲染函数 ==> 虚拟dom概念  --> vnode  --> diff算法， 更新虚拟节点
    //  --> 产生真实节点， 更新
    if (!options.render) {
      // 没有render函数就用template， 目前没有render
      let template = options.template;
      if (!template && el) {
        // 用户也没有传递template， 就去el的内容作为模板
        template = el.outerHTML;
        // console.log(template);
        // 将模板转化为函数， 渲染函数
      }
      let render = compileToFunction(template);
      options.render = render;
      // options.render 就是渲染函数
    }
    // console.log(options.render); // 调用render方法， 渲染成真实dom， 替换掉页面的内容

    mountCompenent(vm, el); // 组件的古仔流程
  };
}
